<template>
	<view v-if="!islogin" :style="skin">
		<view class="blank" @click="close()"></view>
		<!-- #ifndef MP-WEIXIN -->
		<block v-if="Browser == '其他' || !iswx">
			<view class="uni-block-form" v-if="type == 1">
				<view class="title u-m-b-20"><text class="_txt">登录</text></view>
				<view class="form_tip u-m-b-40">
					<text>还没有账号，</text>
					<text class="main-color" @click="type = 2">立即注册</text>
				</view>
				<u-form :model="form" ref="uForm" :border-bottom="false">
					<u-form-item><u-input :clearable="false" :custom-style="input_style" placeholder="请输入手机号码" v-model="form.mobile" /></u-form-item>
					<u-form-item><u-input type="password" :clearable="false" :custom-style="input_style" placeholder="请输入密码" v-model="form.password"></u-input></u-form-item>
					<u-button :disabled="!hasmobile" type="primary" shape="circle" :custom-style="customStyle" @click.stop="H5login">登录</u-button>
				</u-form>
				<view class="u-flex u-row-between form_tip u-m-b-80 u-m-t-40">
					<text @click="type = 4">使用验证码登录</text>
					<text @click="type = 3">忘记密码？</text>
				</view>
				<view class="form_tip">
					<text>登录即表示您已阅读并同意</text>
					<text @click="getProtocol" class="main-color">《用户使用协议》</text>
				</view>
			</view>
			<view class="uni-block-form" v-else-if="type == 2">
				<view class="title u-m-b-20"><text>注册</text></view>
				<view class="form_tip u-m-b-40">
					<text>已有账号，</text>
					<text class="main-color" @click="type = 1">立即登录</text>
				</view>
				<u-form :model="form" ref="uForm" :border-bottom="false">
					<u-form-item><u-input :clearable="false" :custom-style="input_style" placeholder="请输入手机号码" v-model="form.mobile" /></u-form-item>
					<u-form-item>
						<u-input :clearable="false" type="password" :custom-style="input_style" placeholder="请设置8-16位字母及数字组合密码" v-model="form.password"></u-input>
					</u-form-item>
					<u-form-item>
						<u-input :clearable="false" :custom-style="input_style" placeholder="输入验证码" v-model="form.mycode" />
						<u-button type="primary" :disabled="!hasmobile" size="mini" @click.stop="getcode">{{ tips }}</u-button>
					</u-form-item>
					<u-button type="primary" :disabled="!hascode" shape="circle" :custom-style="customStyle" @click.stop="userRegister">注册</u-button>
				</u-form>
				<view class="u-flex u-row-between form_tip u-m-b-80 u-m-t-40">
					<text @click="type = 4">使用验证码登录</text>
					<text @click="type = 3">忘记密码？</text>
				</view>
				<view class="form_tip">
					<text>登录即表示您已阅读并同意</text>
					<text @click="getProtocol" class="main-color">《用户使用协议》</text>
				</view>
			</view>
			<view class="uni-block-form" v-if="type == 3">
				<view class="title u-m-b-20"><text>设置密码</text></view>
				<!-- <view class="form_tip u-m-b-40"><text>短信验证码将发送至{{form.mobile}}</text></view> -->
				<u-form :model="form" ref="uForm" :border-bottom="false">
					<u-form-item><u-input :clearable="false" :custom-style="input_style" placeholder="请输入手机号码" v-model="form.mobile" /></u-form-item>

					<u-form-item>
						<u-input :clearable="false" :custom-style="input_style" placeholder="输入验证码" v-model="form.mycode" />
						<!-- <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code> -->
						<u-button :disabled="!hasmobile" type="primary" size="mini" @click.stop="getcode">{{ tips }}</u-button>
					</u-form-item>
					<u-form-item>
						<u-input type="password" :clearable="false" :custom-style="input_style" v-model="form.password" placeholder="请设置8-16位字母及数字组合密码"></u-input>
					</u-form-item>
					<u-button type="primary" :disabled="!hascode" shape="circle" :custom-style="customStyle" @click.stop="changepassword">确定</u-button>
				</u-form>
				<view class="u-flex u-row-between form_tip u-m-b-80 u-m-t-40">
					<text @click="type = 1">使用账号登录</text>
					<text @click="type = 3">忘记密码？</text>
				</view>
				<view class="form_tip">
					<text>登录即表示您已阅读并同意</text>
					<text @click="getProtocol" class="main-color">《用户使用协议》</text>
				</view>
			</view>
			<view class="uni-block-form" v-else-if="type == 4">
				<view class="title u-m-b-20"><text>验证码登录</text></view>
				<view class="form_tip u-m-b-40">
					<text>已有账号，</text>
					<text class="main-color" @click="type = 1">立即登录</text>
				</view>
				<u-form :model="form" ref="uForm" :border-bottom="false">
					<u-form-item><u-input :clearable="false" :custom-style="input_style" placeholder="请输入手机号码" v-model="form.mobile" /></u-form-item>
					<!-- <u-form-item><u-input :clearable="false" :custom-style="input_style" placeholder="请设置8-16位字母及数字组合密码"></u-input></u-form-item> -->
					<u-form-item>
						<u-input :clearable="false" :custom-style="input_style" placeholder="输入验证码" v-model="form.mycode" />
						<!-- <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code> -->
						<u-button type="primary" :disabled="!hasmobile" size="mini" @click.stop="getcode">{{ tips }}</u-button>
					</u-form-item>
					<u-button type="primary" shape="circle" :custom-style="customStyle" @click.stop="verificationlogin">登录</u-button>
				</u-form>
				<view class="u-flex u-row-between form_tip u-m-b-80 u-m-t-40">
					<text @click="type = 1">使用账号登录</text>
					<text @click="type = 3">忘记密码？</text>
				</view>
				<view class="form_tip">
					<text>登录即表示您已阅读并同意</text>
					<text @click="getProtocol" class="main-color">《用户使用协议》</text>
				</view>
			</view>
			<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>

			<u-popup z-index="100111" v-model="protocolshow" mode="center" width="600rpx" height="800rpx" border-radius="14" :closeable="true">
				<scroll-view class="popup-content" scroll-y>
					<view class="content_title">{{ popupContent.title }}</view>
					<u-parse :tag-style="style" :domain="baseUrl" :html="popupContent.content" :show-with-animation="true"></u-parse>
				</scroll-view>
			</u-popup>
		</block>
		<block v-else>
			<view class="uni-block-login">
				<vimage class="image" imgtype="1" src="static/images/loginbg.png" mode=""></vimage>
				<view class="btns">
					<button @click="close()" class="cancal btn">暂不登录</button>
					<button class="btn" @click="tologin">立即登录</button>
				</view>
			</view>
		</block>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="uni-block-login">
			<vimage class="image" imgtype="1" src="static/images/loginbg.png" mode=""></vimage>
			<view class="btns">
				<button size="mini" @click="close()" class="btn cancal">暂不登录</button>
				<button class="btn" open-type="getUserInfo" @click="wxLogin">立即登录</button>
			</view>
		</view>
	
		<!-- #endif -->
	</view>
</template>
<script>
import http from '../../common/http.js';
import {mapState, mapMutations} from 'vuex';
import base from '@/common/baseUrl.js';
import util from '@/common/util.js';
export default {
	name: 'UniLogin',

	data() {
		return {
			showlogin: false,
			Browser: '',
			iswx: false,
			customStyle: {
				'margin-top': '60rpx',
				height: '67rpx'
			},

			input_style: {
				color: '#A9A9A9'
			},
			form: {
				mobile: '',
				password: '',
				mycode: ''
			},
			type: 1,
			tips: '获取验证码',
			seconds: 60,
			popupContent: {},
			protocolshow: false,
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
		};
	},
	props: {
		show: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		baseUrl() {
			return util.geturl(base.baseUrl);
		},
		...mapState(['islogin', 'skin'])
	},

	mounted() {
		// #ifndef MP-WEIXIN
		this.Browser = util.getBrowser();
		this.iswx = uni.getStorageSync('is_wx');
		// #endif

		this.type = 1;
	},
	watch: {
		'form.mobile': {
			handler(newvalue, oldvalue) {
				const _this = this;
				if (this.$u.test.mobile(newvalue)) {
					// _this.code_Style.background = '#4A73FF';

					_this.hasmobile = true;
				} else {
					// _this.code_Style.background = '#C7D4FF';

					_this.hasmobile = false;
				}
			},
			deep: true,
			immediate: true
		},
		'form.mycode': {
			handler(newvalue, oldvalue) {
				const _this = this;
				if (this.$u.test.code(newvalue, 6) && _this.hasmobile) {
					// _this.customStyle.background = '#4A73FF';
					_this.hascode = true;
				} else {
					// _this.customStyle.background = '#C7D4FF';
					_this.hascode = false;
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		changepassword() {
			if (!this.$u.test.mobile(this.form.mobile)) {
				uni.showToast({
					title: '请填写正确的号码',
					icon: 'none'
				});
				return false;
			}
			if (!this.form.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return false;
			}
			let pid = uni.getStorageSync('pid');
			let params = {
				mobile: this.form.mobile,
				password: this.form.password,
				pid:pid
			};
			http('/user/userRegister', params, 'POST').then(res => {
				if (res.statusCode == 200) {
					const token = res.data.msg;
					this.$store.commit('settoken', token);
					this.gettokenToUserInfo();
					uni.hideLoading();
					this.$store.commit('setlogin', true);
					this.$emit('callback', {
						islogin: true
					});
				}
			});
		},
		verificationlogin() {
			if (!this.$u.test.mobile(this.form.mobile)) {
				uni.showToast({
					title: '请填写正确的号码',
					icon: 'none'
				});
				return false;
			}
			let pid = uni.getStorageSync('pid');
			let params = {
				mobile: this.form.mobile,
				code: this.form.mycode,
				pid:pid
			};
			http('/user/userRegister', params, 'POST').then(res => {
				if (res.statusCode == 200) {
					const token = res.data.msg;
					this.$store.commit('settoken', token);
					this.gettokenToUserInfo();
					uni.hideLoading();
					this.$store.commit('setlogin', true);
					this.$emit('callback', {
						islogin: true
					});
				}
			});
		},
		userRegister() {
			if (!this.$u.test.mobile(this.form.mobile)) {
				uni.showToast({
					title: '请填写正确的号码',
					icon: 'none'
				});
				return false;
			}
			if (!this.form.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return false;
			}
			let pid = uni.getStorageSync('pid');
			let params = {
				mobile: this.form.mobile,
				code: this.form.mycode,
				password: this.form.password,
				pid:pid
			};
			http('/user/userRegister', params, 'POST').then(res => {
				if (res.statusCode == 200) {
					const token = res.data.msg;
					this.$store.commit('settoken', token);
					this.gettokenToUserInfo();
					uni.hideLoading();
					this.$store.commit('setlogin', true);
					this.$emit('callback', {
						islogin: true
					});
				}
			});
		},
		H5login() {
			if (!this.$u.test.mobile(this.form.mobile)) {
				uni.showToast({
					title: '请填写正确的号码',
					icon: 'none'
				});
				return false;
			}
			if (!this.form.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return false;
			}
			let pid = uni.getStorageSync('pid');
			let params = {
				mobile: this.form.mobile,
				password: this.form.password,
				pid:pid
			};
			http('/user/login', params, 'POST').then(res => {
				if (res.statusCode == 200) {
					const token = res.data.msg;
					this.$store.commit('settoken', token);
					this.gettokenToUserInfo();
					uni.hideLoading();
					this.$store.commit('setlogin', true);
					this.$emit('callback', {
						islogin: true
					});
				}
			});
		},
		end() {
			// this.$u.toast('倒计时结束');
		},
		start() {
			// this.$u.toast('倒计时开始');
		},
		codeChange(text) {
			this.tips = text;
		},
		getcode() {
			if (!this.$u.test.mobile(this.form.mobile)) {
				uni.showToast({
					title: '请填写正确的号码',
					icon: 'none'
				});
				return false;
			}
			if (this.$refs.uCode.canGetCode) {
				let data = {
					mobile: this.form.mobile
				};
				this.$http('/user/getsmscode', data, 'post').then(res => {
					if (res.statusCode == 200) {
						this.code = res.data.msg;
						this.$refs.uCode.start();
					}
				});
			}
		},
		getProtocol() {
			this.protocolshow = !this.protocolshow;
			this.$http('/protocol/3', {}, 'get').then(res => {
				this.popupContent = res.data.msg;
			});
		},
		wxLogin: function(e) {
			let pid = uni.getStorageSync('pid');
			let p1 = this.wxSilentLogin();
			let p2 = this.wxGetUserProfile();
			let _this = this;
			Promise.all([p1, p2])
				.then(res => {
					let code = res[0];
					let user = res[1];
					// let iv = res[1].iv
					// let encryptedData = res[1].encryptedData
					// 请求服务器
					const params = {
						code: code,
						pid: pid,
						UserType: 1
					};
					// 请求接口
					http('/login/sign', params, 'POST').then(
						res => {
							if (res.statusCode == 200) {
								const json = res.data.msg;
								uni.setStorageSync('user_id', json.user_id);
								_this.binduserInfo(json, user);
							}
						},
						e => {
							uni.showModal({
								title: '提示',
								content: e,
								showCancel: false
							});
						}
					);
				})
				.catch(err => {
					console.log(err);
				});
		},
		wxGetUserProfile: function() {
			return new Promise((resolve, reject) => {
				uni.getUserProfile({
					lang: 'zh_CN',
					desc: '用于完善用户资料',
					success: res => {
						resolve(res);
						// res.encryptedData,
						// res.iv
					},
					// 失败回调
					fail: err => {
						reject(err);
					}
				});
			});
		},

		wxSilentLogin: function() {
			return new Promise((resolve, reject) => {
				uni.login({
					success(res) {
						resolve(res.code);
					},
					fail(err) {
						reject(err);
					}
				});
			});
		},

		tologin() {
			var is_preview = uni.getStorageSync('is_preview');
			var pid = uni.getStorageSync('pid');
			var mid = uni.getStorageSync('mall_id');
			if (is_preview) {
				this.$store.commit('setlogin', true);
				uni.showToast({
					title: '预览模式',
					icon: 'none'
				});
			} else {
				var url = window.location.href;
				if (pid) {
					url = url + '&pid=' + pid;
				}
				location.href = base.baseUrl + '/index/login/getBaseInfo?url=' + encodeURIComponent(url) + '&mall_id=' + mid;
			}
		},
		open() {
			this.$emit('change', {
				show: true
			});
			this.showlogin = true;
		},
		close(type) {
			this.$nextTick(() => {
				setTimeout(() => {
					this.$store.commit('setlogin', true);
					this.$emit('callback', {
						islogin: false
					});
				}, 300);
			});
		},

		binduserInfo(json, user) {
			let params = {
				encryptedData: user.encryptedData,
				iv: user.iv,
				user_id: json.user_id
			};
			http('/login/userInfo', params, 'POST').then(res => {
				if (res.statusCode == 200) {
					const json = res.data.msg;
					// uni.setStorageSync('token', json.token);
					this.$store.commit('settoken', json.token);
					// this.$store.commit('setUserInfo', json);
					this.gettokenToUserInfo();
					uni.hideLoading();
					this.$store.commit('setlogin', true);
					this.$emit('callback', {
						islogin: true
					});
				} else {
				}
			});
		},
		gettokenToUserInfo() {
			let params = {};
			this.$http('/user/tokenToUserInfo', params, 'GET').then(res => {
				if (res.statusCode == 200) {
					let UserInfo = res.data.msg;
					this.userCenter(UserInfo);
				} else {
					this.$store.commit('setUserInfo', {});
					this.$store.commit('settoken', null);
				}
			});
		},
		userCenter(UserInfo) {
			let params = {};
			this.$http('/user/UserCenter', params, 'GET').then(res => {
				let centerinfo = res.data.msg;
				let myUserInfo = Object.assign({}, UserInfo, centerinfo);
				this.$store.commit('setUserInfo', myUserInfo);
			});
		}
	}
};
</script>
<style lang="scss">
.uni-block-login {
	width: 520rpx;
	height: 600rpx;
	position: fixed;
	top: calc(50% - 300rpx);
	left: calc(50% - 260rpx);
	background: transparent;
	z-index: 12000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	// box-shadow: 0 0 16upx #696969;
	border-radius: 8upx;

	.image {
		width: 520rpx;
		height: 600rpx;
	}

	// text {
	// 	font-size: 40rpx;
	// 	margin: 40rpx 0;
	// }
	.btns {
		position: absolute;
		width: 100%;
		padding: 0 15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		bottom: 40px;
	}
	.btn {
		border-radius: 20px;
		background: #211f2d;
		// border: 1upx solid #211f2d;
		background: rgba(255, 69, 68, 1);
		height: 60rpx;
		line-height: 60rpx;
		width: 180rpx;
		text-align: center;
		font-size: 24rpx !important;
		display: flex;
		color: #fff;
		justify-content: center;
		&.cancal {
			background: rgba(205, 205, 205, 1);
			color: #fff;
		}
	}
}

.blank {
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100vh;
	left: 0;
	top: 0;
	position: fixed;
	z-index: 10099;
}
.uni-block-form {
	width: 686rpx;
	border-radius: 12rpx;
	padding: 30rpx 60rpx;
	background: #ffffff;
	position: fixed;
	top: calc(50% - 400rpx);
	left: calc(50% - 343rpx);
	z-index: 10100;
	.title {
		font-size: 50rpx;
		font-weight: bold;
		color: #333333;
		padding: 20rpx 0;
		text-align: left;
		width: 100%;
		display: inline-block;
		position: relative;

		._txt {
			position: relative;
			z-index: 2;
			line-height: 70rpx;
			width: 100rpx;
		}
		&::after {
			content: '';
			display: block;
			width: 108rpx;
			height: 18rpx;
			background: var(--main-color);
			opacity: 1;
			border-radius: 18rpx;
			position: absolute;
			bottom: 22rpx;
			left: -4rpx;
			z-index: 1;
		}
	}
	.form_tip {
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
	}
	.main-color {
		color: var(--main-color);
	}
}
</style>
